<template>
  <view>
    <nav-bar page-title="收入通知"/>
    <view class="month-selector">
      <picker mode="date" fields="month" @change="onMonthChange">
        <view>{{ selectedMonth || '选择月' }}</view>
      </picker>
    </view>
    <view>
      <canvas canvas-id="revenue" id="revenue" class="charts" @touchstart="touchstart" @touchmove="touchmove"
              @touchend="touchend"/>
    </view>
  </view>
</template>

<script>
import uCharts from '@qiun/ucharts/u-charts'
import NavBar from "@/components/nav-bar/nav-bar.vue";

const uChartsInstance = {};
export default {
  components: {NavBar},
  data() {
    return {
      cWidth: 750,
      cHeight: 500,
      selectedMonth: '',
      revenueData: {}
    };
  },
  onReady() {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(750);
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500);
    // Set current month as default
    const now = new Date();
    this.selectedMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
    this.getServerData();
  },
  methods: {
    onMonthChange(e) {
      this.selectedMonth = e.detail.value;
      this.getServerData();
    },
    getServerData() {
      //模拟从服务器获取数据时的延时
      // setTimeout(() => {
      //   //模 拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      //   let res = {
      //     categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
      //     // categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
      //
      //     series: [
      //       {
      //         name: "收入",
      //         textColor: "#FFFFFF",
      //         data: [35, 36, 31, 33, 13, 34, 35, 36, 31, 33, 13, 34, 35, 36, 31, 33, 13, 34, 35, 36, 31, 33, 13, 34, 35, 36, 31, 33, 13, 34, 34]
      //       },
      //       {
      //         name: "退款",
      //         textColor: "#FFFFFF",
      //         data: [18, 27, 21, 24, 6, 28, 18, 27, 21, 24, 6, 8, 27, 21, 24, 6, 28, 27, 21, 24, 6, 2, 27, 21, 24, 6, 18, 27, 21, 24, 6]
      //       }
      //     ]
      //   };
      //   this.drawCharts('revenue', res);
      // }, 500);

      setTimeout(() => {
        // Generate random data for the selected month
        const [year, month] = this.selectedMonth.split('-');
        const daysInMonth = new Date(year, month, 0).getDate();

        const categories = Array.from({length: daysInMonth}, (_, i) => String(i + 1));
        const revenueData = Array.from({length: daysInMonth}, () => Math.floor(Math.random() * 50) + 10);
        const refundData = Array.from({length: daysInMonth}, () => Math.floor(Math.random() * 30) + 5);

        const res = {
          categories: categories,
          series: [
            {
              name: "كىرىم",
              textColor: "#FFFFFF",
              data: revenueData
            },
            {
              name: "قايتۇرۇش",
              textColor: "#FFFFFF",
              data: refundData
            }
          ]
        };
        this.drawCharts('revenue', res);
      }, 500);
    },
    drawCharts(id, data) {
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "column",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 15, 0, 5],
        enableScroll: true,
        legend: {},
        xAxis: {
          axisLine: false,
          disableGrid: true,
          scrollShow: true,
          itemCount: 10,
        },
        // Y轴配置
        yAxis: {data: [{min: 0}]},
        extra: {
          // 跨站配置柱状图
          column: {
            type: "stack",
            width: 20,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            labelPosition: "center"
          }
        }
      });
    },
    touchstart(e) {
      uChartsInstance[e.target.id].scrollStart(e);
    },
    touchmove(e) {
      uChartsInstance[e.target.id].scroll(e);
    },
    touchend(e) {
      uChartsInstance[e.target.id].scrollEnd(e);
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    },
  }
};
</script>

<style scoped>
.charts {
  width: 750rpx;
  height: 500rpx;
}

.month-selector {
  padding: 20rpx;
  text-align: center;
  background-color: #fff;
  margin-bottom: 20rpx;
}
</style>